var web = web || {};
web.Emotion = Class.create();
web.Emotion.prototype = {
	initialize: function() {
		this.emotion = null;
		this.preview = null;
		this.element = null;
		this.editor = null;
		this.emotionDesc = new Array('微笑','撇嘴','色','发呆','得意','流泪','害羞','闭嘴','睡','大哭','尴尬','发怒','调皮','呲牙','惊讶','难过','酷','冷汗','抓狂','吐','偷笑','可爱','白眼','傲慢','饥饿','困','惊恐','流汗','憨笑','大兵','奋斗','咒骂','疑问','嘘','晕','折磨','衰','骷髅','敲打','再见','擦汗','抠鼻','鼓掌','糗大了','坏笑','左哼哼','右哼哼','哈欠','鄙视','委屈','快哭了','阴险','亲亲','吓','可怜','菜刀','西瓜','啤酒','篮球','乒乓','咖啡','饭','猪头','玫瑰','凋谢','示爱','爱心','心碎','蛋糕','闪电','炸弹','刀','足球','瓢虫','便便','月亮','太阳','礼物','拥抱','强','弱','握手','胜利','抱拳','勾引','拳头','差劲','爱你','NO','OK','爱情','飞吻','跳跳','发抖','怄火','转圈','磕头','回头','跳绳','挥手','激动','街舞','献吻','左太极','右太极');
		this.centerPosX = 0;
	},
	bind: function(element_id, editor_id) {
		var _this = this;
		var _element = $('#'+ element_id);
		var _editor = $('#'+ editor_id);
		if( 0 == _element.size() || 0 == _editor.size() ) return;
		
		_element.bind('click', {element:_element, editor:_editor}, function(event) {
			_this._init(event.data.element, event.data.editor);
			_this._show();
		});
	},
	_init: function(element, editor) {
		this.element = element;
		this.editor = editor;
	},
	_show: function() {
		if (!this.emotion) this._createEmotionPanel();
		this.editor.focus();
		
		var _offset = this.element.offset();
		this.emotion.css({left:_offset.left, top:_offset.top+this.element.height()+3});
		this.centerPosX = _offset.left + parseInt(this.emotion.width()/2);
		this.emotion.show();
	},
	_hide: function() {
		this.emotion.hide();
		this.preview.hide();
	},
	_createEmotionPanel: function() {
		var _this = this;
		var _emotion =  '<div id="div_emotion_panel" class="emotion">' +
						'	<div class="emotion_container">' +
						'		<div class="emotion_preview" style="display:none;"><img/><span></span></div>' +
						'		<ul class="emotion_default"></ul>' +
						'	</div>' +
						'</div>';
						
		var _body = $('body');
		this.emotion = $(_emotion);
		this.emotion.appendTo(_body);
		this.preview = this.emotion.find(".emotion_preview");
		
		var _ul = this.emotion.find("ul");
		var _viewImg = this.preview.children("img");
		var _viewDesc = this.preview.children("span");
		
		var _li, _a;
		for (var i=0; i<this.emotionDesc.length; i++) {
			_li = $('<li></li>');
			_a = $('<a href="javascript:;"><div class="icon emotion_default_'+ i +'"></div></a>');
			
			_li.bind('mouseover', {index:i}, function(event){
				var _i = event.data.index;
				var _x = event.pageX;

				_viewImg.attr('src', 'http://old.sns.com/images/common/em/e'+ (_i+100) +'.gif');
				_viewDesc.html( _this.emotionDesc[_i] );

				_this.preview.show();
				if (_x > _this.centerPosX) {
					_this.preview.css('cssText', 'left:3px;');
				} else {
					_this.preview.css('cssText', 'right:3px;');
				}
			});
			
			_a.bind('click', {index:i}, function(event) {
				_this._insertEmotion( _this.emotionDesc[event.data.index] );
				_this._hide();
			});
			
			_li.append(_a);
			_ul.append(_li);
		}
		
		this.emotion.bind('mouseup', function(event){
			event.stopPropagation();								   
		});
		_body.bind('mouseup', function(){
			_this._hide();
		});
	},
	_insertEmotion: function(text) {
		this.editor.focus();
		
		var _s = '[/'+ text +']';
		if( document.selection ) {
			document.selection.createRange().text = _s;
		} else {
			var _v = this.editor.val();
			var _start = this.editor.get(0).selectionStart;
			this.editor.val( _v.substr(0, _start)+ _s + _v.substring(_start, _v.length));
		}
	}
}